<template>
  <div class="shop border-t mt-3 p-2">
    <div class="display-flex ai-center">
      <i class="iconfont icon-xuanxiang"></i>
      <p class="pl-2 pb-1 font-xm grey-1">附近商家</p>
    </div>
    <div>
      <ul v-if="shops">
        <li v-for="(item,i) in shops" :key="i" class="border-b pt-3 pb-3" @click="$router.push('/shop')">
          <div class="display-flex jc-start">
            <img src="./images/bread.jpg" alt="" width="72px" height="75px">
            <div class="pl-2 pr-2 flex-1 " >
              <div class="display-flex jc-between text-center">
                <div class="display-flex">
                  <p class="font-xl font-weight title ellipsis">{{item.name}}</p>
                </div>
                <div>
                  <ul class="display-flex desc">
                    <li v-for="support in item.supports" :key="support._id" :style="{color:`#${support.icon_color}`}">
                      {{support.icon_name}}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="display-flex jc-between pt-3">
                <div class="display-flex ai-center">
                  <Star :score="item.rating" :size="24"/>
                  <span class="orange font-xss pl-1">{{item.rating}}</span>
                  <span class="font-small pl-2 grey-2">{{`月售${item.recent_order_num}单`}}</span>
                </div>
                <span class="primary font-small text mr-1">{{item.delivery_mode.text}}</span>
              </div>
              <div class="font-xs grey-2 pt-2">
                <span>{{`￥${item.float_minimum_order_amount}起送`}}</span>
                <span class="grey-3"> / </span>
                <span>{{item.piecewise_agent_fee.tips}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul v-else>
        <li v-for="n in 10" :key="n">
          <img src="./images/shop_back.svg" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import Star from "../Star/Star";
  export default {
    name: "ShopList",
    components:{Star},
    computed:{
      ...mapState(['shops']),
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/main";
  .shop{
    .iconfont {
      color: map_get($colors,'grey-1');
    }
    .title::before{
      content: '品牌';
      padding: 0.077rem;
      background-color: #ffd930;
      font-size: 0.846rem;
      margin-right: 0.385rem;
      border-radius: 0.154rem;
    }
    .desc{
      li {
        border: 1px solid map_get($colors,'border');
        font-size: map_get($font-sizes,'xss') * $font-base-size;
        padding: 0 2px;
      }
    }
    .text{
      border: 1px solid map_get($colors,'primary')
    }
  }
</style>
